<template>
	<view class="bottom-nav" :style="getBottomNavStyle()">
		<view 
			class="nav-item" 
			v-for="(item, index) in getBottomNavItems()" 
			:key="item.key"
			:class="{ active: isActive(item) }"
			@click="navigateToPage(item.path)"
		>
			<text class="nav-icon">{{ item.icon }}</text>
			<text class="nav-text">{{ item.name }}</text>
			<view class="nav-badge" v-if="getBadgeCount(item.key) > 0">{{ getBadgeCount(item.key) }}</view>
		</view>
	</view>
</template>

<script>
	import permissionManager from '@/utils/permission.js'
	
	export default {
		name: 'BottomNavigation',
		props: {
			currentPage: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				permissionManager: permissionManager
			}
		},
		mounted() {
			console.log('BottomNavigation mounted, currentPage:', this.currentPage);
			console.log('Navigation items:', this.getBottomNavItems());
			console.log('Navigation items length:', this.getBottomNavItems().length);
		},
		methods: {
			// 获取底部导航栏样式
			getBottomNavStyle() {
				const roleConfig = permissionManager.getRoleConfig();
				if (!roleConfig) {
					return {
						'border-top-color': '#409EFF'
					};
				}
				return {
					'border-top-color': roleConfig.primaryColor
				};
			},
			
			// 获取底部导航栏项目
			getBottomNavItems() {
				// 所有角色都显示相同的5个导航项
				return [
					{ key: 'dashboard', name: '工作台', icon: '📊', path: '/pages/index/index' },
					{ key: 'assets', name: '资产管理', icon: '📦', path: '/pages/asset/index' },
					{ key: 'fault-report', name: '故障报修', icon: '📋', path: '/pages/repair/fault-report' },
					{ key: 'repairs', name: '故障维修', icon: '🔧', path: '/pages/repair/index' },
					{ key: 'more', name: '更多', icon: '⋯', path: '/pages/more/index' }
				];
			},
			
			// 检查当前页面是否激活
			isActive(item) {
				if (!this.currentPage) return false;
				
				// 根据当前页面路径判断激活状态
				const currentPath = this.currentPage;
				const itemPath = item.path;
				
				// 精确匹配
				if (currentPath === itemPath) {
					return true;
				}
				
				// 特殊处理：工作台页面
				if (item.key === 'dashboard' && currentPath.includes('/pages/index/index')) {
					return true;
				}
				
				// 特殊处理：故障报修页面
				if (item.key === 'fault-report' && currentPath.includes('/pages/repair/fault-report')) {
					return true;
				}
				
				// 特殊处理：故障维修页面
				if (item.key === 'repairs' && currentPath.includes('/pages/repair/index')) {
					return true;
				}
				
				// 特殊处理：资产管理页面
				if (item.key === 'assets' && currentPath.includes('/pages/asset/index')) {
					return true;
				}
				
				// 特殊处理：备件管理页面
				if (item.key === 'spare-parts' && currentPath.includes('/pages/spare-parts/')) {
					return true;
				}
				
				// 特殊处理：更多页面
				if (item.key === 'more' && currentPath.includes('/pages/more/index')) {
					return true;
				}
				
				return false;
			},
			
			// 获取徽章数量
			getBadgeCount(key) {
				const badgeMap = {
					'repairs': 3,  // 故障维修显示数字3
					'assets': 0
				};
				return badgeMap[key] || 0;
			},
			
			// 导航到页面
			navigateToPage(path) {
				if (path) {
					console.log('底部导航跳转:', path);
					
					// 检查维修主管和维修工长权限
					if (permissionManager.hasRole('maintenance_manager') || permissionManager.hasRole('maintenance_foreman')) {
						// 维修主管和维修工长只能访问故障报修页面
						if (path !== '/pages/repair/fault-report') {
							uni.showModal({
								title: '权限不足',
								content: '您没有权限访问此页面',
								showCancel: false
							});
							return;
						}
					}
					
					// 检查当前页面路径，避免重复跳转
					const pages = getCurrentPages();
					const currentPage = pages[pages.length - 1];
					const currentRoute = '/' + currentPage.route;
					
					if (currentRoute === path) {
						console.log('已在目标页面，无需跳转');
						return;
					}
					
					// 使用 reLaunch 确保页面栈清理，避免返回问题
					uni.reLaunch({
						url: path,
						success: () => {
							console.log('页面跳转成功:', path);
						},
						fail: (err) => {
							console.log('页面跳转失败:', err);
							// 如果 reLaunch 失败，尝试 navigateTo
							uni.navigateTo({
								url: path
							});
						}
					});
				}
			}
		}
	}
</script>

<style scoped>
	/* 底部导航栏 */
	.bottom-nav {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #ffffff;
		border-top: 1rpx solid #e0e0e0;
		display: flex;
		justify-content: space-around;
		padding: 20rpx 0;
		z-index: 9999;
		box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.1);
		height: 120rpx;
		min-height: 120rpx;
	}
	
	.nav-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8rpx;
		position: relative;
		flex: 1;
		color: #999999;
		font-size: 24rpx;
		padding: 10rpx 0;
	}
	
	.nav-item.active {
		color: #007AFF;
	}
	
	.nav-item.active .nav-icon {
		color: #007AFF;
	}
	
	.nav-item.active .nav-text {
		color: #007AFF;
		font-weight: 500;
	}
	
	.nav-icon {
		font-size: 40rpx;
		margin-bottom: 5rpx;
		color: #666666;
	}
	
	.nav-text {
		font-size: 20rpx;
		color: #666666;
	}
	
	.nav-badge {
		position: absolute;
		top: 5rpx;
		right: 15rpx;
		width: 20rpx;
		height: 20rpx;
		background-color: #ff3b30;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 12rpx;
		color: white;
		font-weight: bold;
		min-width: 20rpx;
		text-align: center;
		line-height: 1;
	}
</style>
